<template>
    <div>
        <!-- 搜索栏 -->
        <el-row style="margin-top: 20px;">
            <el-col :span="4">
                <el-input placeholder="请输入内容" v-model="SelectStallForm.stallInfoNum" clearable>
                </el-input>
            </el-col>
            <el-col :span="1">
                <el-button icon="el-icon-search" circle @click="chooseAll"></el-button>
            </el-col>
            <el-col :span="10">
                <el-button @click="chooseLeisure">空闲中</el-button>
                <el-button @click="chooseInUse">使用中</el-button>
                <el-button @click="chooseListing">上架中</el-button>
                <el-button @click="chooseDelist">下架中</el-button>
                <el-badge :value="num" class="item" style="margin-left: 20px;">
                    <el-button size="small" type="primary" @click="dialogVisible6 = true">处理申请车位</el-button>
                </el-badge>
            </el-col>
        </el-row>

        <!-- 车位申请处理对话框 -->
        <el-dialog title="车位申请处理" :visible.sync="dialogVisible6" width="85%">
            <el-table :data="pageCheck.list">
                <el-table-column property="stallInfoNum" label="车位号" width="180"></el-table-column>
                <el-table-column property="rentersRealName" label="申请人" width="180"></el-table-column>
                <el-table-column property="rentersInfoCard" label="身份证号" width="180"></el-table-column>
                <el-table-column property="stallBuyProve" label="车位购买凭证" width="250">
                    <template slot-scope="scope">
                        <el-image :src="scope.row.stallBuyProve" :preview-src="scope.row.entranceImg"
                            style="width: 200px; height: 100px">
                            <div slot="placeholder" class="image-slot">
                                加载中<span class="dot">...</span>
                            </div>
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column property="stallCheckNote" label="备注" width="200"></el-table-column>
                <el-table-column property="address" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" icon="el-icon-view" @click="handleClick(scope.row)">查看</el-button>
                        <el-button type="text" icon="el-icon-check" @click="passCommon(scope.row)">普通车位</el-button>
                        <el-button type="text" icon="el-icon-check" @click="passCharge(scope.row)">电车车位</el-button>
                        <el-button type="text" icon="el-icon-close" @click="rejectStallCheck(scope.row)"
                            style="color: red;">驳回</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
        <!-- 大图查看 -->
        <el-dialog :visible.sync="dialogVisible7">
            <el-image style="width: 100%; height: 100%" :src="this.imgSrc"></el-image>
        </el-dialog>

        <!-- 车位总体信息栏 -->
        <el-row style="margin-top: 40px;">
            <el-col :span="12">
                <el-descriptions title="普通车位">
                    <el-descriptions-item label="车位总数">
                        <div>{{ pageComon.total }}</div>
                        <el-button type="text" @click="dialogVisible = true" size="mini" style="margin-left: 10px;"
                            icon="el-icon-circle-plus">新增</el-button>
                    </el-descriptions-item>
                    <el-descriptions-item label="车位单价">
                        <div>{{ CertifiedInfoDto.stallUnitPrice }}元/每小时</div>
                        <el-button type="text" @click="dialogVisible2 = true" size="mini" style="margin-left: 10px;"
                            icon="el-icon-edit">修改</el-button>
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
            <el-col :span="12">
                <el-descriptions title="电车车位">
                    <el-descriptions-item label="车位总数">
                        <div>{{ pageCharge.total }}</div>
                        <el-button type="text" @click="dialogVisible1 = true" size="mini" style="margin-left: 10px;"
                            icon="el-icon-circle-plus">新增</el-button>
                    </el-descriptions-item>
                    <el-descriptions-item label="车位单价">
                        <div>{{ CertifiedInfoDto.chargeUnitPrice }}元/每小时</div>
                        <el-button type="text" @click="dialogVisible3 = true" size="mini" style="margin-left: 10px;"
                            icon="el-icon-edit">修改</el-button>
                    </el-descriptions-item>
                </el-descriptions>
            </el-col>
        </el-row>

        <!-- 新增车位对话框 -->
        <el-dialog title="新增普通车位" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <el-input placeholder="请输入内容" v-model="AddStallForm.stallInfoNum">
                <template slot="prepend">普通车位号:</template>
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="addStallNormal">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="新增普通车位" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
            <el-input placeholder="请输入内容" v-model="AddStallForm.stallInfoNum">
                <template slot="prepend">电车车位号:</template>
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="addStallCharge">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 修改单价对话框 -->
        <el-dialog title="新增普通车位" :visible.sync="dialogVisible2" width="30%" :before-close="handleClose">
            <el-input placeholder="请输入内容" v-model="price">
                <template slot="prepend">普通车位单价(元/小时):</template>
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="updateStallPrice">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="新增普通车位" :visible.sync="dialogVisible3" width="30%" :before-close="handleClose">
            <el-input placeholder="请输入内容" v-model="price">
                <template slot="prepend">电车车位单价(元/小时):</template>
            </el-input>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="updateChargePrice">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 表格展示栏 -->
        <el-row style="margin-top: 10px;">
            <el-col :span="12">
                <el-table :data="pageComon.list" style="width: 100%" height="320px">
                    <el-table-column prop="stallInfoNum" label="车位号" width="150">
                    </el-table-column>
                    <el-table-column prop="stallUseState" label="使用状态" width="150">
                        <template #default="scope">
                            <span v-if="scope.row.stallUseState == 0">空闲</span>
                            <span v-if="scope.row.stallUseState == 1">使用中</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stallUpDownState" label="上架状态" width="150">
                        <template #default="scope">
                            <span v-if="scope.row.stallUpDownState == 2">上架</span>
                            <span v-if="scope.row.stallUpDownState == 3">下架</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="upStall(scope.row)">上架</el-button>
                            <el-button type="warning" size="mini" @click="downStall(scope.row)">下架</el-button>
                            <!-- <el-button type="info" v-if="scope.row.stallUpDownState == 2" size="mini">查看</el-button> -->
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
            <el-col :span="12">
                <el-table :data="pageCharge.list" style="width: 100%" height="320px">
                    <el-table-column prop="stallInfoNum" label="车位号" width="150">
                    </el-table-column>
                    <el-table-column prop="stallUseState" label="使用状态" width="150">
                        <template #default="scope">
                            <span v-if="scope.row.stallUseState == 0">空闲</span>
                            <span v-if="scope.row.stallUseState == 1">使用中</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="stallUpDownState" label="上架状态" width="150">
                        <template #default="scope">
                            <span v-if="scope.row.stallUpDownState == 2">上架</span>
                            <span v-if="scope.row.stallUpDownState == 3">下架</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="address" label="操作" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="primary" size="mini" @click="upStall(scope.row)">上架</el-button>
                            <el-button type="warning" size="mini" @click="downStall(scope.row)">下架</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>

        <!-- 车位上架对话框 -->
        <el-dialog title="电车车位上架详情" :visible.sync="dialogVisible4" width="30%" :before-close="handleClose">
            <div>每日出租时间段设置：</div>
            <div>
                <span style="margin-top: 20px;">开始时间：</span>
                <el-time-picker arrow-control v-model="CerUpStallByIdForm.startTime" :picker-options="{
                }" placeholder="任意时间点" style="margin-top: 20px;" value-format="HH:mm" format="HH:mm">
                </el-time-picker>
            </div>
            <div>
                <span style="margin-top: 20px;">结束时间：</span>
                <el-time-picker arrow-control v-model="CerUpStallByIdForm.endTime" :picker-options="{
                }" placeholder="任意时间点" style="margin-top: 20px;" value-format="HH:mm" format="HH:mm">
                </el-time-picker>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="cerDownStallById">确 定</el-button>
            </span>
        </el-dialog>

        <el-dialog title="普通车位上架详情" :visible.sync="dialogVisible5" width="30%" :before-close="handleClose">
            <div>每日出租时间段设置：</div>
            <div>
                <span style="margin-top: 20px;">开始时间：</span>
                <el-time-picker arrow-control v-model="CerUpStallByIdForm.startTime" :picker-options="{
                }" placeholder="任意时间点" style="margin-top: 20px;" value-format="HH:mm" format="HH:mm">
                </el-time-picker>
            </div>
            <div>
                <span style="margin-top: 20px;">结束时间：</span>
                <el-time-picker arrow-control v-model="CerUpStallByIdForm.endTime" :picker-options="{
                }" placeholder="任意时间点" style="margin-top: 20px;" value-format="HH:mm" format="HH:mm">
                </el-time-picker>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="cerDownStallById">确 定</el-button>
            </span>
        </el-dialog>


        <!-- 分页按钮 -->
        <el-row>
            <el-col :span="12">
                <el-pagination background layout="total, prev, pager, next" :page-size="pageComon.size"
                    :total="pageComon.total" @current-change="changePageNum1">
                </el-pagination>
            </el-col>
            <el-col :span="12">
                <el-pagination background layout="total, prev, pager, next" :page-size="pageCharge.size"
                    :total="pageCharge.total" @current-change="changePageNum2">
                </el-pagination>
            </el-col>
        </el-row>

    </div>
</template>

<script>
export default {
    name: "carportManage",
    data() {
        return {
            imgSrc: "",
            num: null,
            price: null,
            pageCheck: {},
            pageComon: {},
            pageCharge: {},
            list: [],
            PassStallCheckForm: {
                stallInfoAffiliation: 8,
                rentersInfoId: null,
                stallCheckId: null,
                stallType: null
            },
            loadAllStallCheckForm: {
                certifiedInfoId: null,
                pageNum: null,
                pageSize: null
            },
            CertifiedInfoDto: {},
            CerUpStallByIdForm: {
                stallInfoId: null,
                startTime: "",
                endTime: ""
            },
            SelectStallForm: {
                certifiedId: null,
                stallUseState: null,
                stallUpDownState: null,
                stallTpye: null,
                stallInfoNum: "",
                pageSize: null,
                pageNum: null
            },
            AccountInfoDto: {
                account: "",
                role: "",
                certifiedName: "",
                certifiedInfoId: null
            },
            PlatGetStallForm: {
                current: null,
                size: null
            },
            AddStallForm: {
                certifiedInfoId: null,
                stallInfoNum: "",
                stallTpye: null,
                stallInfoAffiliation: null
            },
            dialogVisible: false,
            dialogVisible1: false,
            dialogVisible2: false,
            dialogVisible3: false,
            dialogVisible4: false,
            dialogVisible5: false,
            dialogVisible6: false,
            dialogVisible7: false,
            value1: true
        }
    },
    methods: {
        rejectStallCheck(obj) {
            this.$http.get("/stall/stallCheck/rejectStallCheck", {
                params: {
                    stallCheckId: obj.stallCheckId
                }
            }).then(resp => {
                console.log(resp)
                if (resp.data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: resp.data.message
                    })
                    this.loadAllStallCheck()
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.data.message
                    })
                }
            })
        },
        passCharge(obj) {
            this.PassStallCheckForm.rentersInfoId = obj.rentersInfoId
            this.PassStallCheckForm.stallCheckId = obj.stallCheckId
            this.PassStallCheckForm.stallType = 1
            this.passStallCheck()
        },
        passCommon(obj) {
            this.PassStallCheckForm.stallCheckId = obj.stallCheckId
            this.PassStallCheckForm.rentersInfoId = obj.rentersInfoId
            this.PassStallCheckForm.stallType = 2
            this.passStallCheck()
        },
        passStallCheck() {
            this.$http.post("/stall/stallCheck/passStallCheck", this.PassStallCheckForm).then(resp => {
                console.log(resp)
                if (resp.data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: resp.data.message
                    })
                    this.loadAllStallCheck()
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.data.message
                    })
                }
            })
        },
        handleClick(obj) {
            this.imgSrc = obj.stallBuyProve
            this.dialogVisible7 = true
        },
        loadAllStallCheck() {
            this.loadAllStallCheckForm.certifiedInfoId = localStorage.getItem("certifiedInfoId")
            this.$http.post("/stall/stallCheck/loadAllStallCheck", this.loadAllStallCheckForm).then(resp => {
                console.log(resp)
                if (resp.data.code == 200) {
                    this.pageCheck = resp.data.data
                    this.num = this.pageCharge.pages 
                }
            })
        },
        downStall(obj) {
            this.$http.get("/stall/stallInfo/cerDownStallById", {
                params: {
                    stallInfoId: obj.stallInfoId
                }
            }).then(resp => {
                console.log(resp)
                if (resp.data.code == 200) {
                    this.$message({
                        type: 'success',
                        message: resp.data.message
                    })
                    this.cancel()
                    this.loadAllCommonStall()
                    this.loadAllChargeStall()
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.data.message
                    })
                }
            })
        },
        upStall(obj) {
            this.CerUpStallByIdForm.stallInfoId = obj.stallInfoId
            this.dialogVisible5 = true
        },
        cerDownStallById() {
            if (this.CerUpStallByIdForm.startTime == "" || this.cerDownStallById.endTime == "") {
                this.$message({
                    type: 'warning',
                    message: "请选择时间段"
                })
            } else {
                this.$http.post("/stall/stallInfo/cerDownStallById", this.CerUpStallByIdForm).then(resp => {
                    console.log(resp)
                    if (resp.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: resp.data.message
                        })
                        this.cancel()
                        this.loadAllCommonStall()
                        this.loadAllChargeStall()
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.data.message
                        })
                    }
                })
            }
        },
        updateChargePrice() {
            if (this.price == null) {
                this.$message({
                    type: 'warning',
                    message: "请填写车位单价"
                });
            } else {
                this.$http.get("/certified/certifiedInfo/updateChargePrice", {
                    params: {
                        price: this.price
                    }
                }).then(resp => {
                    console.log(resp)
                    if (resp.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: resp.data.message
                        });
                        this.cancel()
                        this.loadCertifiedById()
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.data.message
                        });
                    }
                })
            }
        },
        updateStallPrice() {
            if (this.price == null) {
                this.$message({
                    type: 'warning',
                    message: "请填写车位单价"
                });
            } else {
                this.$http.get("/certified/certifiedInfo/updateStallPrice", {
                    params: {
                        price: this.price
                    }
                }).then(resp => {
                    console.log(resp)
                    if (resp.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: resp.data.message
                        });
                        this.cancel()
                        this.loadCertifiedById()
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.data.message
                        });
                    }
                })
            }
        },
        changePageNum1(pageNum) {
            this.SelectStallForm.pageNum = pageNum;
            this.loadAllCommonStall()
        },
        changePageNum2(pageNum) {
            this.SelectStallForm.pageNum = pageNum;
            this.loadAllChargeStall()
        },
        chooseAll() {
            this.SelectStallForm.stallUseState = null
            this.SelectStallForm.stallUpDownState = null
            this.loadAllChargeStall()
            this.loadAllCommonStall()
        },
        chooseListing() {
            this.SelectStallForm.stallUseState = null
            this.SelectStallForm.stallUpDownState = 2
            this.loadAllChargeStall()
            this.loadAllCommonStall()
        },
        chooseDelist() {
            this.SelectStallForm.stallUseState = null
            this.SelectStallForm.stallUpDownState = 3
            this.loadAllChargeStall()
            this.loadAllCommonStall()
        },
        chooseInUse() {
            this.SelectStallForm.stallUseState = null
            this.SelectStallForm.stallUseState = 1
            this.loadAllChargeStall()
            this.loadAllCommonStall()
        },
        chooseLeisure() {
            this.SelectStallForm.stallUseState = null
            this.SelectStallForm.stallUseState = 0
            this.loadAllChargeStall()
            this.loadAllCommonStall()
        },
        loadAllCommonStall() {
            this.SelectStallForm.certifiedId = localStorage.getItem("certifiedInfoId")
            this.SelectStallForm.stallTpye = 2
            this.$http.post("/stall/stallInfo/findStallsByCertifiedId", this.SelectStallForm).then(resp => {
                console.log(resp)
                this.pageComon = resp.data.data
            })
        },
        loadAllChargeStall() {
            this.SelectStallForm.certifiedId = localStorage.getItem("certifiedInfoId")
            this.SelectStallForm.stallTpye = 1
            this.$http.post("/stall/stallInfo/findStallsByCertifiedId", this.SelectStallForm).then(resp => {
                console.log(resp)
                this.pageCharge = resp.data.data
            })
        },
        getAccountInformation() {
            this.$http.get("/certified/certifiedAccount/getAccountInformation").then(resp => {
                console.log(resp)
                this.AccountInfoDto.account = resp.data.data.account
                this.AccountInfoDto.certifiedInfoId = resp.data.data.certifiedInfoId
                this.AccountInfoDto.certifiedName = resp.data.data.certifiedName
                this.AccountInfoDto.role = resp.data.data.role
                localStorage.setItem("certifiedInfoId", resp.data.data.certifiedInfoId)
            })
            this.loadAllCommonStall()
            this.loadAllChargeStall()
            this.loadCertifiedById()
        },
        loadCertifiedById() {
            this.$http.get("/certified/certifiedInfo/findCertifiedById", {
                params: {
                    certifiedInfoId: localStorage.getItem("certifiedInfoId")
                }
            }).then(resp => {
                console.log(resp)
                this.CertifiedInfoDto = resp.data.data
            })
        },
        addStallNormal() {
            this.AddStallForm.stallTpye = null
            this.AddStallForm.stallInfoAffiliation = null
            if (this.AddStallForm.stallInfoNum == "") {
                alert("请填写车位信息")
            } else {
                this.AddStallForm.certifiedInfoId = localStorage.getItem("certifiedInfoId")
                this.AddStallForm.stallTpye = 2
                this.AddStallForm.stallInfoAffiliation = 6
                this.list = []
                this.list.push(this.AddStallForm)
                this.$http.post("/stall/stallInfo/certifiedAddStall", this.list).then(resp => {
                    console.log(resp)
                    if (resp.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: resp.data.message
                        });
                        this.cancel()
                        this.loadAllCommonStall()
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.data.message
                        });
                    }
                })
            }
        },
        addStallCharge() {
            this.AddStallForm.stallTpye = null
            this.AddStallForm.stallInfoAffiliation = null
            if (this.AddStallForm.stallInfoNum == "") {
                alert("请填写车位信息")
            } else {
                this.AddStallForm.certifiedInfoId = localStorage.getItem("certifiedInfoId")
                this.AddStallForm.stallTpye = 1
                this.AddStallForm.stallInfoAffiliation = 6
                this.list = []
                this.list.push(this.AddStallForm)
                this.$http.post("/stall/stallInfo/certifiedAddStall", this.list).then(resp => {
                    console.log(resp)
                    if (resp.data.code == 200) {
                        this.$message({
                            type: 'success',
                            message: resp.data.message
                        });
                        this.cancel()
                        this.loadAllChargeStall()
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.data.message
                        });
                    }
                })
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        },
        cancel() {
            this.price = null
            this.AddStallForm.stallInfoNum = ""
            this.AddStallForm.stallTpye = null
            this.AddStallForm.stallInfoAffiliation = null
            this.CerUpStallByIdForm.startTime = ""
            this.CerUpStallByIdForm.endTime = ""
            this.dialogVisible = false
            this.dialogVisible1 = false
            this.dialogVisible2 = false
            this.dialogVisible3 = false
            this.dialogVisible4 = false
            this.dialogVisible5 = false
        }
    },
    created() {
        this.getAccountInformation()
        this.loadAllStallCheck()
    }
}
</script>

<style scoped></style>